<template>
  <div>
    <h1>1、动态组件的使用</h1>
    <div>
      <button @click="comName='userName'">账号密码填写</button>
      <button @click="comName='userInfo'">个人信息填写</button>
    </div>
    <p>下面显示注册的组件:</p>
    <!-- 
      keep-alive 是vue内置组件，用来缓存其他组件内容的（面试常考题）
      总结
        只要把需要缓存的组件用keep-alive组件包裹起来，就能够将该组件缓存起来。
     -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import userName from "./components/userName.vue";
import userInfo from "./components/userInfo.vue";
export default {
  data(){
    return {
      comName: "userName"
    }
  },
  components: {
    userName,userInfo
  }
}
</script>

<style>

</style>